<template>
  <div class="data-presentation-index">
    <el-scrollbar class="scrollbar-con">
      <div class="total_of">
        <el-row :gutter="40">
          <el-col :xs="12" :sm="12" :lg="6">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/one1.png" alt="">
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计访问人数
                </div>
                <div class="r-num">{{ SystemCount.UV数 }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/one2.png" alt="">
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计访问人次
                </div>
                <div class="r-num">{{ SystemCount.PV数 }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/one3.png" alt="">
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  今日访问人数
                </div>
                <div class="r-num">{{ SystemCount.今日UV数 }}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/one4.png" alt="">
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  今日访问人次
                </div>
                <div class="r-num">{{ SystemCount.今日PV数 }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="user_statistics">
        <div class="user_top">
          <div class="icon" />
          <div class="text">用户统计</div>
        </div>
        <div class="user_info">
          <!-- :gutter="20" type="flex" justify="space-around" -->
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
              <el-card class="datas-item">
                <div class="leftHead">
                  <img src="../images/two1.png" alt="">
                </div>
                <div class="rightInfo">
                  <div class="r-title">
                    注册用户人数
                  </div>
                  <div class="r-num">{{ UserInfo.registeredUsersCount }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
              <el-card class="datas-item">
                <div class="leftHead">
                  <img src="../images/two2.png" alt="">
                </div>
                <div class="rightInfo">
                  <div class="r-title">
                    认证用户数
                  </div>
                  <div class="r-num">{{ UserInfo.authUsersCount }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
              <el-card class="datas-item">
                <div class="leftHead">
                  <img src="../images/two3.png" alt="">
                </div>
                <div class="rightInfo">
                  <div class="r-title">
                    待认证用户数
                  </div>
                  <div class="r-num">{{ UserInfo.authMemberCount }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
              <el-card class="datas-item">
                <div class="leftHead">
                  <img src="../images/two4.png" alt="">
                </div>
                <div class="rightInfo">
                  <div class="r-title">
                    男用户数
                  </div>
                  <div class="r-num">{{ UserInfo.manUsersCount }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
              <el-card class="datas-item">
                <div class="leftHead">
                  <img src="../images/two5.png" alt="">
                </div>
                <div class="rightInfo">
                  <div class="r-title">
                    女用户数
                  </div>
                  <div class="r-num">{{ UserInfo.womanUsersCount }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="user_echarts">
          <div id="user_echarts_left" class="user_echarts_left" />
          <div id="user_echarts_right" class="user_echarts_right" />
        </div>
        <!--        <div id="register_echarts" class="register_echarts" />-->
      </div>
      <div class="resource_statistics">
        <div class="resource_top">
          <div class="icon" />
          <div class="text">资源统计</div>
        </div>
        <div class="resource_one">
          <div class="resource_one_title">视频</div>
          <div class="resource_one_info">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three11.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      视频课程总数
                    </div>
                    <div class="r-num">{{ VideoCount.courseInfoCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three12.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      视频课件总数
                    </div>
                    <div class="r-num">{{ VideoCount.coursewareCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three13.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计观看人数
                    </div>
                    <div class="r-num">{{ VideoCount.peopleViewCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three14.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计观看人次
                    </div>
                    <div class="r-num">{{ VideoCount.personTimeViewCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three15.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计观看时长(小时)
                    </div>
                    <div class="r-num">{{ VideoCount.cumulativeTime }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="height:26px" />
        <div class="resource_one">
          <div class="resource_one_title">音频</div>
          <div class="resource_one_info">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three21.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      音频课程总数
                    </div>
                    <div class="r-num">{{ AudioCount.courseInfoCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three22.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      音频课件总数
                    </div>
                    <div class="r-num">{{ AudioCount.coursewareCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three23.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计收听人数
                    </div>
                    <div class="r-num">{{ AudioCount.peopleViewCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three24.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计收听人次
                    </div>
                    <div class="r-num">{{ AudioCount.personTimeViewCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three25.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计收听时长(小时)
                    </div>
                    <div class="r-num">{{ AudioCount.cumulativeTime }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="height:26px" />
        <div class="resource_one">
          <div class="resource_one_title">活动</div>
          <div class="resource_one_info">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three31.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计举办活动次数
                    </div>
                    <div class="r-num">{{ ActivityCount.activityCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three32.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计参与活动人数
                    </div>
                    <div class="r-num">{{ ActivityCount.activityPeopleCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three33.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计参与活动人次
                    </div>
                    <div class="r-num">{{ ActivityCount.activityPersonTimeCount }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="height:26px" />
        <div class="resource_one">
          <div class="resource_one_title">答题</div>
          <div class="resource_one_info">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three41.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      题目总数
                    </div>
                    <div class="r-num">{{ RushCount.questionCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three42.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计发布闯关次数
                    </div>
                    <div class="r-num">{{ RushCount.publishCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three43.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计答题总人数
                    </div>
                    <div class="r-num">{{ RushCount.answerPeopleCount }}</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="{span: '4-8'}">
                <el-card class="datas-item">
                  <div class="leftHead">
                    <img src="../images/three44.png" alt="">
                  </div>
                  <div class="rightInfo">
                    <div class="r-title">
                      累计答题总人次
                    </div>
                    <div class="r-num">{{ RushCount.answerPersonTimeCount }}</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {
  queryUserInfoCount,
  queryVideoCount,
  queryAudioCount,
  queryActivityCount,
  queryRushCount,
  queryUserAgeCount,
  queryNewUserCount,
  querySystemCount,
  queryRegisterUserCount
} from '../api.js'
export default {
  name: 'DataPresentation',
  data() {
    return {
      data: [
        { name: 'XSS跨站', value: 259, block: 1, monitor: 258 },
        { name: '频率限制', value: 197, block: 181, monitor: 16 },
        { name: 'SQL注入', value: 193, block: 48, monitor: 145 },
        { name: 'CSRF', value: 54, block: 53, monitor: 1 },
        { name: '恶意广告检测', value: 18, block: 0, monitor: 18 },
        { name: '其他防护', value: 49, block: 0, monitor: 0 }
      ],
      SystemCount: {},
      UserInfo: {},
      VideoCount: {},
      AudioCount: {},
      ActivityCount: {},
      RushCount: {},
      UserAgeCount: [],
      NewUserCountX: [],
      NewUserCountY: [],
      RegisterUserCount: null,
      RegisterUserCountX: [],
      RegisterUserCountY: []
    }
  },
  created() {},
  mounted() {
    this.dataInits()
    this.echatsRender()
  },
  methods: {
    echatsRender() {
      queryUserAgeCount().then((res) => {
        if (res.data.code === '200') {
          this.UserAgeCount = res.data.data
          // for (const key in UserAgeCount) {
          //   this.UserAgeCount.push({
          //     name: key,
          //     value: UserAgeCount[key].count,
          //     monitor: UserAgeCount[key].percentage
          //   })
          // }
          this.init()
        }
      })
      queryNewUserCount().then((res) => {
        if (res.data.code === '200') {
          const NewUserCount = res.data.data
          for (const key in NewUserCount) {
            this.NewUserCountX.push(key)
            this.NewUserCountY.push(NewUserCount[key])
          }
          this.inits()
        }
      })
      // queryRegisterUserCount().then((res) => {
      //   if (res.data.code === '200') {
      //     const RegisterUserCount = res.data.data
      //     for (const key in RegisterUserCount) {
      //       this.RegisterUserCountX.push(key)
      //       this.RegisterUserCountY.push(RegisterUserCount[key])
      //     }
      //     this.registInit()
      //   }
      // })
    },
    async dataInits() {
      console.log(111)
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        const {
          data: { data: SystemCount }
        } = await querySystemCount()
        const {
          data: { data: UserInfo }
        } = await queryUserInfoCount()
        const {
          data: { data: VideoCount }
        } = await queryVideoCount()
        const {
          data: { data: AudioCount }
        } = await queryAudioCount()
        const {
          data: { data: ActivityCount }
        } = await queryActivityCount()
        const {
          data: { data: RushCount }
        } = await queryRushCount()
        this.SystemCount = SystemCount
        this.UserInfo = UserInfo
        this.VideoCount = VideoCount
        this.AudioCount = AudioCount
        this.ActivityCount = ActivityCount
        this.RushCount = RushCount
        loading.close()
      } catch {
        loading.close()
      }
    },

    // 饼状图配置项
    init() {
      const EchartsDom = document.getElementById('user_echarts_left')
      const myChart = echarts.init(EchartsDom)
      // window.addEventListener('resize', () => {
      //   myChart.resize()
      // })
      const option = {
        // 环形图中间默认显示文字
        title: {
          text: `{a|年龄分布}`,
          top: 'bottom',
          left: -100,
          textStyle: {
            rich: {
              a: {
                fontSize: 22,
                padding: [0, 0, 0, 190],
                color: 'rgba(0,0,0,0.65)'
              },
              b: {
                fontSize: 26,
                padding: [0, 0, 0, 210],
                color: 'rgba(0,0,0,0.85)'
              }
            }
          }
        },
        tooltip: {
          backgroundColor: '#fff',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          padding: [12, 16, 12, 16],
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          // 悬浮的位置可以调整，总距离左边10px
          position: (point) => {
            return ['10', point[1]]
          },
          formatter: (param) => {
            const { name, value } = param
            const result = `<div>${name}:${value} 人</div>`
            return result
          }
        },
        legend: {
          orient: 'vertial',
          height: '100%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 40,
          right: 0,
          top: '0%',
          borderRadius: 15,
          data: this.UserAgeCount,
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          formatter: (name) => {
            const value = this.UserAgeCount.find((item) => item.name === name).monitor
            return `${name}：${value}`
          }
        },
        color: [
          '#4168FF',
          '#47CBFF',
          '#FF7A33',
          '#45DE7F',
          '#FFAC34',
          '#5AD7D8',
          '#8163E9',
          '#FF5F45',
          '#01C581',
          '#B754F6',
          '#FCDA0F',
          '#9B501B',
          '#A0D911',
          '#2998FF',
          '#938BF8'
        ],
        series: [
          {
            name: '攻击总数',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['30%', '50%'], // 图形位置
            label: {
              // 鼠标悬浮具体数据显示
              show: false
            },
            data: this.UserAgeCount
          }
        ]
      }
      option && myChart.setOption(option)
    },

    // 新增用户数
    inits() {
      const EchartsDom = document.getElementById('user_echarts_right')
      const myChart = echarts.init(EchartsDom)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      const option = {
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        title: {
          text: `新增用户数`,
          top: 'top',
          left: 0
          // textStyle: {
          //   rich: {
          //     a: {
          //       fontSize: 22,
          //       padding: [0, 0, 0, 190],
          //       color: 'rgba(0,0,0,0.65)'
          //     },
          //     b: {
          //       fontSize: 26,
          //       padding: [0, 0, 0, 210],
          //       color: 'rgba(0,0,0,0.85)'
          //     }
          //   }
          // }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          spiltLine: {
            show: true // 想要不显示网格线，改为false
          },
          type: 'category',
          axisLine: {
            show: true
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            margin: 10
          },
          boundaryGap: false,
          data: this.NewUserCountX
        },
        yAxis: {
          type: 'value',
          spiltLine: {
            show: true // 想要不显示网格线，改为false
          }
        },
        series: [
          {
            data: this.NewUserCountY,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                color: '#e44d42'
              }
            },
            itemStyle: {
              color: '#e44d42',
              borderWidth: 1,
              borderColor: '#e44d42'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    registInit() {
      const EchartsDom = document.getElementById('register_echarts')
      const myChart = echarts.init(EchartsDom)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      const option = {
        grid: {
          left: '10%',
          right: '8%',
          bottom: '10%',
          top: '0%',
          containLabel: true
        },
        dataZoom: {
          type: 'slider',
          showDetail: false,
          /* 滚动条鼠标提示不显示*/
          show: true,
          yAxisIndex: [0],
          // 数据窗口范围的起始数值和结束数值
          startValue: 0,
          endValue: 6,
          handleSize: 7,
          // 自定义宽高
          hight: '250px',
          width: '30px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: (params) => {
            return (
              params[0].name +
                '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E44D42'></span>" +
                '注册人数' +
                ' : ' +
                params[0].value +
                ' <br/>'
            )
          }
        },
        backgroundColor: '#fff',
        xAxis: {
          name: '注册人数',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            color: '#666666',
            fontSize: '32px'
          },
          show: true,
          type: 'value',
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#666666',
              fontSize: 12,
              fontFamily: 'PingFang SC'
            }
          },
          splitLine: {
            // 网格线
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
              color: '#E5E5E5',
              width: 5
            }
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                fontSize: 18,
                fontFamily: 'PingFang SC',
                fontWeight: 400,
                textAlign: 'left',
                color: '#4b4b4b'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              onZero: false,
              lineStyle: {
                color: '#E5E5E5',
                width: 5
              }
            },
            data: this.RegisterUserCountX
          }
        ],
        series: [
          {
            name: '数据',
            type: 'bar',
            zlevel: 1,
            barWidth: 10,
            data: this.RegisterUserCountY,
            showBackground: true,
            backgroundStyle: {
              opacity: 1,
              color: '#EFF2F7'
            },
            itemStyle: {
              normal: {
                color: '#E44D42',
                barBorderRadius: [0, 10, 10, 0]
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" type="text/scss">
@import '@/styles/mixin.scss';

.data-presentation-index {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  padding: 20px;
  padding-bottom: 67px;

  .scrollbar-con {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      box-sizing: border-box;
      overflow-x: hidden !important;
      margin-right: 0 !important;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .total_of {
      height: auto;
      width: 100%;
      margin-bottom: 27px;
      background: #ffffff;
      padding: 28px 36px 17px;
      border-radius: 9px;
      // .el-col-6 {
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      // }
      .datas-item {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        // justify-content: center;
        margin-bottom: 20px;
        /* margin-right: 20px; */
        padding: 30px 10px 30px 14px;
        cursor: pointer;
        background: #f4fafe;
        border-radius: 8px;
        .el-card__body {
          padding: 0;
          // padding-left: 14px;
          // width: 100%;
          display: flex !important;
          .leftHead {
            width: 73px;
            .icon {
              width: 100%;
            }
          }
          .rightInfo {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            //margin-left: 7px;
            .r-title {
              font-size: 15px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #828796;
            }

            .r-num {
              font-size: 28px;
              font-family: DINPro, DINPro-Bold;
              font-weight: bold;
              text-align: left;
              color: #333333;
            }
          }
        }
      }
    }

    .user_statistics {
      // height: 613px;
      width: 100%;
      background: #ffffff;
      padding: 25px 0;
      border: 1px solid #e9e9e9;
      border-radius: 10px;
      box-shadow: -1.33px 0px 28px 1.33px rgba(38, 46, 45, 0.06);
      margin-bottom: 27px;
      .user_top {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .icon {
          width: 16px;
          height: 32px;
          background: #e44d42;
          border-radius: 0 32px 32px 0;
          margin-right: 16px;
        }
        .text {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #0a1a3f;
          line-height: 40px;
        }
      }
      .user_info {
        width: 100%;
        padding: 0 27px;
        margin-bottom: 31px;
        .el-col-lg-4-8 {
          width: 20%;
        }
        .datas-item {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          // justify-content: center;
          margin-bottom: 20px;
          padding: 20px 15px;
          cursor: pointer;
          background: #fafafe;
          border-radius: 8px;
          .el-card__body {
            padding: 0;
            //padding-left: 14px;
            // width: 100%;
            display: flex !important;
            .leftHead {
              width: 53px;
              img {
                width: 100%;
              }
            }
            .rightInfo {
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              margin-left: 7px;
              .r-title {
                font-size: 15px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #666666;
                // line-height: 9px;
                // white-space: nowrap;
              }
              .r-num {
                font-size: 24px;
                font-family: DINPro, DINPro-Bold;
                font-weight: 700;
                text-align: left;
                color: #333333;
                // line-height: 9px;
              }
            }
          }
        }
      }
      .user_echarts {
        width: 100%;
        padding: 0 26px;
        display: flex;
        justify-content: space-around;
        .user_echarts_left {
          width: 35%;
          height: 320px;
          margin-right: 40px;
        }
        .user_echarts_right {
          width: 50%;
          // flex: 1;
          // overflow: hidden;
          canvas {
            width: 100%;
          }
        }
      }
      .register_echarts {
        width: 100%;
        padding: 0 26px;
        height: 250px;
        margin-top: 20px;
      }
    }
    .resource_statistics {
      width: 100%;
      // height: 888px;
      background: #ffffff;
      border: 1px solid #e9e9e9;
      border-radius: 10px;
      padding: 25px 0;
      box-shadow: -1.33px 0px 28px 1.33px rgba(38, 46, 45, 0.06);

      .resource_top {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .icon {
          width: 16px;
          height: 32px;
          background: #e44d42;
          border-radius: 0 32px 32px 0;
          margin-right: 16px;
        }
        .text {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #0a1a3f;
          line-height: 40px;
        }
      }
      .resource_one {
        padding-left: 26px;
        padding-right: 26px;
        .resource_one_title {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #0a1a3f;
          margin-bottom: 22px;
        }
        .flex_start {
          width: 286px;
          height: 126px;
        }
        .resource_one_info {
          .el-col-lg-4-8 {
            width: 20%;
          }
          .datas-item {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            // justify-content: center;
            cursor: pointer;
            background: #fafafa;
            border-radius: 8px;
            padding: 20px 15px;
            .el-card__body {
              padding: 0;
              // padding-left: 14px;
              // width: 100%;
              display: flex !important;
              .leftHead {
                width: 53px;
                img {
                  width: 100%;
                }
              }
              .rightInfo {
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                margin-left: 16px;
                .r-title {
                  font-size: 16px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #666666;
                  // line-height: 9px;
                  // white-space: nowrap;
                }

                .r-num {
                  font-size: 24px;
                  font-family: DINPro, DINPro-Bold;
                  font-weight: 700;
                  text-align: left;
                  color: #333333;
                  // line-height: 9px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
